<template>
	<view class="content">
		<!--f1:手机状态栏-->
		<view class="status-bar" :style="{height: statusBarHeight+'px'}"></view>
		<!--f2:Logo图片-->
		<image src="../../static/img/logo.png" 
			class="logo" mode="widthFix"></image>
		<!--f3:手机号码输入框-->
		<view class="input-group">
			<input v-model="phone"  class="input" placeholder="请输入手机号"/>
			<uni-icons class="icon left" type="phone-filled" size="25px" 
				color="#090"></uni-icons>
			<uni-icons class="icon right" type="clear" size="25px" 
				color="#1296DB"></uni-icons>
		</view>
		<!--f4:密码输入框-->
		<view class="input-group pwd-group">
			<input v-model="pwd" :password="hidePwd" class="input" placeholder="请输入密码"/>
			<uni-icons class="icon left" type="locked-filled" size="25px" 
				color="#090"></uni-icons>
			<uni-icons class="icon right" :type="hidePwd ? 'eye-slash-filled' : 'eye-filled'" 
				size="25px" @click="hidePwd = !hidePwd" color="#8a8a8a"></uni-icons>
		</view>
		<!--f5:登录按钮-->
		<button class="btn" @click="doLogin">登 录</button>
		<!--f6:找回密码-->
		<navigator class="find" 
			url="/pages/findPwd/findPwd">找回密码</navigator>
		<!-- 
		<navigator class="find" open-type="switchTab"
			url="/pages/index/index">主页</navigator>
		<navigator class="find"
			url="/pages/my/my">我的</navigator> 
		-->
	</view>
</template>

<script>
	import {userLogin} from "../../service/index.js"
	export default {
		data() {
			return {
				//系统状态栏高度
				statusBarHeight:0,
				//控制密码输入框的显示/隐藏
				hidePwd : true,
				//手机号
				phone : "",
				//密码
				pwd:""
			}
		},
		methods: {
			async doLogin(){
				//1.验证手机号
				if(!/^1[3-9]\d{9}$/.test(this.phone)){
					uni.showToast({
						title:"手机号非法!",
						icon:'none',
						duration:2000,
						position:'bottom'
					})
					return;
				}
				//2.验证密码
				if(this.pwd.length<6){
					uni.showToast({
						title:"密码格式不正确!",
						icon:'none',
						duration:2000,
						position:'bottom'
					})
					return;
				}
				//3.将手机号 密码 发送给服务器接口 进行登录
				//测试账号 13166666666 123456
				let data = await userLogin(this.phone,this.pwd);
				//{code: 2000, msg: 'login succ', token: 'xxxxx'}
				//4.处理结果
				if(data.code == 2000){//登录成功
					//--提示欢迎回来在index.vue里实现
					//--存储令牌
					uni.setStorageSync("userToken",data.token)
					//--跳转到主页
					uni.switchTab({url:"/pages/index/index"})
				}else if(data.code == 4003){//手机号或密码错误
					uni.showToast({
						title:"手机号或密码错误!",
						icon:"none",
						duration:2000
					})
				}else{//其他错误
					uni.showToast({
						title:"其他错误!",
						icon:"none",
						duration:2000
					})
				}
			}
		},
		//生命周期方法，页面加载时触发，一个页面只触发一次
		onLoad() {
			//获取系统信息 - 当前系统状态栏高度
			let {statusBarHeight} = uni.getSystemInfoSync();
			//将获取到的系统状态栏高度 保存到vue变量中
			this.statusBarHeight = statusBarHeight;
		}
	}
</script>

<style lang="scss">
	.status-bar{
		background-color:$zh-theme-color;
		width: 750rpx;
		//height: 40rpx;
		position: fixed;
	}
	.logo{
		width: 450rpx;
		//height: 450rpx;
		margin: $uni-spacing-col-lg * 6 auto 0;
	}
	.input-group{
		position: relative;
		margin: $uni-spacing-col-lg * 3 $uni-spacing-col-lg 0;
		//弹性容器中子元素在交叉轴上居中对齐
		align-items: center;
		&.pwd-group{
			margin-top: $uni-spacing-col-lg * 2;
		}
		.input{
			font-size: $uni-font-size-base;
			border: 1px solid $uni-border-color;
			border-radius: $uni-border-radius-base;
			width: 100%;
			height: $uni-font-size-lg * 2;
			padding: 0 $uni-spacing-col-base * 4;
		}
		.icon{
			position: absolute;
			&.left{
				left: $uni-spacing-row-sm;
			}
			&.right{
				right: $uni-spacing-row-sm;
			}
		}
	}
	.btn{
		margin: $uni-spacing-col-lg * 2.5;
		background-color: $zh-theme-color;
		color: $uni-text-color-inverse;
		font-size: $uni-font-size-base;
		&:active{
			//scss函数：darken(颜色,百分比) 将颜色加深指定百分比
			//scss函数：lighten(颜色,百分比) 将颜色变浅指定百分比
			background-color: darken($zh-theme-color,5%);
		}
	}
	.find{
		text-align: center;
		color: $zh-theme-color;
		margin-top: $uni-spacing-col-base * 2;
	}
	
	//针对不同高度的手机 适配样式
	//高度小于500px 
	@media screen and (max-height:500px) {
		.logo{
			margin-top: $uni-spacing-col-lg * 2 ;
		}
	}
	//高度大于700px
	@media screen and (min-height:700px){
		.logo{
			margin-top: $uni-spacing-col-lg * 12;
			margin-bottom: $uni-spacing-col-lg * 4;
		}
	}
</style>
